<script lang="ts" setup name="CouponDialog">
import { ref, nextTick } from "vue";
import { ElTable } from "element-plus";
interface DialogData {
  title: string; // dialog标题
  visible?: boolean; // 弹出弹框
  tableData: any[]; // 表格数据
  mate?: string; // rowKey
  index?: number; // 索引
  columns: any[]; // 表格的列，如果有多选框将多选框放第一列type：selection
  type?: any; // 判断type是selection还是其他
  search?: {
    // 搜索配置项
    label?: string;
    type?: string;
    mate?: any[];
    searchLabel?: string;
  };
}
const dialogData = ref<DialogData>({
  title: "",
  visible: false,
  tableData: [],
  mate: "id",
  columns: [],
  type: ""
});
const tableRef = ref<InstanceType<typeof ElTable> | null>(null);
const acceptParams = async (params: DialogData) => {
  dialogData.value.visible = true;
  dialogData.value.tableData = params.tableData;
  nextTick(() => {
    dialogData.value.tableData.forEach((e, index) => {
      if (e.isSelected) {
        tableRef.value?.toggleRowSelection(e, true);
      }
    });
  });
  dialogData.value.index = params.index;
  dialogData.value.columns = [];
  params.columns.forEach(v => {
    if (!v.type) {
      dialogData.value.columns.push(v);
    }
  });
  dialogData.value.type = params.columns.find(v => v.type).type;
  dialogData.value.title = params.title;
  dialogData.value.search = params.search;
};

interface Emits {
  (name: "onConfirm", value: {}): void;
  (name: "onSearch", value: {}): void;
  (name: "onReset", value: {}): void;
}
const emits = defineEmits<Emits>();

// 选中数据
const selectData = ref<any[]>();
const onSelect = (e: any) => {
  selectData.value = e;
};

const onConfirm = () => {
  console.log(33333);

  selectData.value?.map(v => (v.count = 1));
  emits("onConfirm", {
    tableData: selectData.value,
    index: dialogData.value.index || 0
  });
  dialogData.value.visible = false;
};
// 搜索输入内容
const searchText = ref("");
const searchType = ref<number | null>();
const onReset = () => {
  // 充值搜索
  searchText.value = "";
  searchType.value = null;
  emits("onReset", { index: dialogData.value.index });
};

defineExpose({
  acceptParams
});
</script>

<template>
  <el-dialog style="padding: 20px" v-model="dialogData.visible" :title="dialogData.title" width="800">
    <el-form-item v-if="dialogData.search" :label="dialogData.search.label">
      <el-input
        v-if="dialogData.search.type === 'input'"
        type="text"
        v-model="searchText"
        style="width: 30%; margin-right: 10px"
      />
      <text style="margin-right: 10px">{{ dialogData.search.searchLabel }}</text>
      <el-select style="width: 30%" v-if="dialogData.search.mate" v-model="searchType">
        <el-option v-for="item in dialogData.search.mate" :key="item.value" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-button
        style="margin-left: 10px"
        type="primary"
        size="small"
        @click="emits('onSearch', { searchText, index: dialogData.index, searchType })"
      >
        搜索
      </el-button>
      <el-button style="margin-left: 10px" type="primary" size="small" @click="onReset"> 重置 </el-button>
    </el-form-item>
    <div style="min-height: 300px; overflow-y: auto">
      <el-table ref="tableRef" @selection-change="onSelect" border row-key="id" :data="dialogData.tableData" style="width: 100%">
        <el-table-column type="selection" v-if="dialogData.type === 'selection'"></el-table-column>
        <el-table-column
          :width="item.width"
          v-for="item in dialogData.columns"
          :prop="item.prop"
          :label="item.label"
          :key="item.prop"
        >
          <template #default="{ row }">
            {{ row[item.prop] || "--" }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogData.visible = false">取消</el-button>
        <el-button type="primary" @click="onConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
